<template>
  <div class="container">
    <headerNav></headerNav>
    <div class="content mindWidth">
      <!-- 面包屑 -->
      <div class="crumb">
        <span class="crumb-span" @click="$router.push('/')">首页</span>>
        <span class="crumb-span">政策图谱</span>
      </div>
      <!-- 地图、右侧统计数据 -->
      <div class="map-content">
        <div class="map-title flex items-middle">
          <img src="../../assets/PolicyDataCenter.png" alt />
          <h2>政策数据中心</h2>
        </div>
        <div class="map-info flex items-middle space-between">
          <mapChart @getChartArea="getChartArea" ref="mapChart" :province="province" :city="city"></mapChart>
          <div class="statis">
            <PolicyStatistics :cityType="cityType" :mapCity="city" :mapProvince="province"></PolicyStatistics>
          </div>
        </div>
      </div>
      <!-- 柱状图统计数据 -->
      <div class="chart-box">
        <div class="select-list">
          <div class="select-item flex flex-start">
            <div class="item-lable">地区：</div>
            <div v-if="area" class="item-info">
              <span class="active">{{ area }}</span>
            </div>
            <div v-else class="item-info">
              <span class="active">{{ city }}</span>
            </div>
          </div>
          <div class="select-item flex flex-start">
            <div class="item-lable">通过年份：</div>
            <el-date-picker
              v-model="startYear"
              type="year"
              size="mini"
              style="width:180px"
              placeholder="开始年份"
              @change="keywordEvent(1)"
            ></el-date-picker>
            <p style="margin: 0 10px">到</p>
            <el-date-picker
              v-model="endYear"
              type="year"
              size="mini"
              style="width:180px"
              placeholder="结束年份"
              @change="keywordEvent(2)"
            ></el-date-picker>
          </div>
          <div class="select-item flex flex-start">
            <div class="item-lable">关键字：</div>
            <div class="flex">
              <el-input
                style="width:180px"
                type="text"
                size="mini"
                placeholder="输入关键词"
                v-model="keywordValue"
              />
              <el-button type="primary" size="mini" @click="keywordEvent">搜索</el-button>
            </div>
          </div>
        </div>
        <!-- 柱状图 -->
        <div class="chart-bottom">
          <dataStatistics ref="policyReference"></dataStatistics>
        </div>
      </div>
    </div>
    <navigation></navigation>
    <footerNav></footerNav>
  </div>
</template>
<script>
import axios from "axios";
import { getMapCode } from "../../util/mapCode.js";
import { getPolicyAtlas } from "../../api/api.js";
import mapChart from "./component/mapChart.vue";
import PolicyStatistics from "../../components/project/PolicyStatistics.vue"; //右侧政策统计、最新动态
import dataStatistics from "../../components/project/dataStatistics.vue"; //底部数据表
import { sessionTake } from "../../util/validate.js";
import {
  commonRequest,
  queryRegionDepartmentInfo,
  getAllDepartmentArea,
  getSubInfo
} from "../../api/api.js";
export default {
  name: "fenPolicyMap",
  components: {
    mapChart,
    PolicyStatistics,
    dataStatistics
  },
  data() {
    return {
      regionData: [], //所有政策通知地区
      chartArea: [], //获取柱状图需传地区
      mapCode: "",
      mapName: "",
      mapData: [],
      province: "",
      city: "",
      area: "",

      keywordValue: "",
      startYear: "",
      endYear: "",
      cityType: 3
    };
  },
  mounted() {
    this.getFenCity();
    this.keywordEvent();
  },
  methods: {
    getFenCity() {
      this.city = sessionTake("cityName"); // 城市名
      this.province = sessionTake("provinceName"); //省份名
      this.$refs.mapChart.getCode(this.province, this.city);
    },
    getChartArea(params) {
      this.area = params.name;
      this.keywordEvent();
    },
    keywordEvent(index) {
      if (index == 1) {
        var datasta = new Date(this.startYear);
        var dataend = new Date(this.endYear);
        if (this.endYear != "") {
          if (dataend.getFullYear() < datasta.getFullYear()) {
            this.$message.error("请选择正确的时间");
            this.startYear = "";
          }
        }
      }
      if (index == 2) {
        var datasta = new Date(this.startYear);
        var dataend = new Date(this.endYear);
        if (this.startYear != "") {
          if (dataend.getFullYear() < datasta.getFullYear()) {
            this.$message.error("请选择正确的时间");
            this.endYear = "";
          }
        }
      }
      this.$refs.policyReference.acceptedValue(
        this.province,
        this.city,
        this.endYear,
        this.startYear,
        this.keywordValue,
        this.area
      );
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  .content {
    .map-content {
      .map-title {
        img {
          width: 18px;
        }
        h2 {
          color: #333333;
          margin-left: 22px;
        }
      }
      .map-info {
        .statis {
          width: 35%;
        }
      }
    }
    .chart-box {
      .select-list {
        width: 100%;
        .select-item {
          padding: 10px 20px;
          box-sizing: border-box;
          border-bottom: 1px solid #eee;
          overflow: hidden;
          position: relative;
          .item-lable {
            width: 75px;
            text-align: center;
            font-size: 14px;
            color: #333;
            padding-top: 5px;
            box-sizing: border-box;
          }
          .item-info {
            width: 1035px;
            overflow: hidden;
            max-height: 32px;
            span {
              display: inline-block;
              font-size: 14px;
              padding: 2px 6px;
              margin: 3px 14px;
              background-color: #fff;
              color: #333;
              position: relative;
              overflow: hidden;
              border-radius: 4px;
              img {
                width: 16px;
                position: absolute;
                right: -2px;
                top: -2px;
              }
            }
            .active {
              background-color: #44a2ff;
              color: #fff;
              position: relative;
              overflow: hidden;
              border-radius: 4px;
              img {
                width: 16px;
                position: absolute;
                right: -2px;
                top: -2px;
              }
            }
          }
          .more {
            width: 50px;
            font-size: 14px;
            color: #44a2ff;
            padding-top: 5px;
            box-sizing: border-box;
            img {
              width: 8px;
              height: 6px;
              display: inline-block;
            }
          }
          .select-input {
            .item-lable {
              width: 58px;
            }
            .key-input {
              margin-left: 10px;
              input {
                width: 240px;
                height: 32px;
                background: #ffffff;
                border: 1px solid #daeaf5;
                border-radius: 4px 0px 0px 4px;
                padding-left: 12px;
                box-sizing: border-box;
                &::-webkit-input-placeholder {
                  color: #aaa;
                }
              }
              span {
                display: inline-block;
                width: 60px;
                height: 32px;
                line-height: 32px;
                background: #44a2ff;
                border-radius: 0px 4px 4px 0px;
                text-align: center;
                color: #fff;
                cursor: pointer;
              }
            }
          }
          .policy-map {
            width: 80px;
            height: 32px;
            line-height: 32px;
            background: #44a2ff;
            border-radius: 4px;
            text-align: center;
            color: #fff;
            cursor: pointer;
          }
        }
      }
      .chart-bottom {
        width: 100%;
        height: 260px;
      }
    }
  }
}
</style>